<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            align-items: center;
            vertical-align: center;
        }

        .container {
            width: 500px;
        }

        .logo {
            width: 100%;
            text-align: center;
            margin: 10px 0;
        }

        h1 {
            text-align: center;
        }

        .container div {
            width: 100%;
        }

        .container .searchTerm {
            width: 100%;
            margin: 10px 0;
            padding: 10px;
            border-radius: 25px;
            border: 2px solid #ccc;
            outline: none;
            font-size: 16px;

        }
    </style>
</head>

<body>
    <div class="container">
        <div class="logo">
            <img src=" https://files.codelife.cc/itab/search/bing.svg"></a>
        </div>
        <h1>百科搜索</h1>
        <div class="search"><input type="text" class="searchTerm" id="searchTerm" placeholder="enter a search term">
        </div>
        <div>
            <main id="searchResult"></main>
        </div>
    </div>

    <script>

        const searchTermElem = document.querySelector('#searchTerm');
        const searchResultElem = document.querySelector('#searchResult');

        searchResultElem.focus();

        searchTermElem.addEventListener('input', () => {
            search(event.target.value);
        });
        const stripHtml = (html) => {
            let div = document.createElement('div');
            div.innerHTML = html;
            return div.textContent;
        };

        const highlight = (str, keyword, className = "highlight") => {
            const hl = `<span class="${className}">${keyword}</span>`;
            return str.replace(new RegExp(keyword, 'gi'), hl);
        };

        const generateSearchResultHtml = (results, searchTerm) => {
            return results
                .map(result => {
                    const title = highlight(stripHtml(result.title), searchTerm);
                    const snippet = highlight(stripHtml(result.snippet), searchTerm);

                    return `<article>
                    <a href="https://en.wikipedia.org/?curid=${result.pageid}">
                        <h2>${title}</h2>
                        </a>
                        <div class="summary">${snippet}...</div>
                        </article>`;
                })
                .join('')
        };
        const debounce = (fn, delay = 500) => {
            let timeoutId;
            return (...args) => {
                if (timeoutId) {
                    clearTimeout(timeoutId);
                }
                timeoutId = setTimeout(() => {
                    fn.apply(null, args);
                    // fn(...args);
                }, delay);
            }
        };

        const search = debounce(async (keyword) => {
            if (!keyword) {
                searchResultElem.innerHTML = '';
                return;
            }
            try {
                // make an API call
                // let keywd = encodeURIComponent(keyword);
                // const url = `https://cn.bing.com/search?q=${keywd}&PC=U316&FORM=CHROMN`;
                // const reponse = await Fetch(url, {
                // method: 'GET',
                // headers: {
                // "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
                // 'referrer policy': 'strict-origin-when-cross-origin',
                // 'cookie': '_EDGE_V=1; MUID=2AC9489DECF86FD81E035CABEDBB6E48; MUIDB=2AC9489DECF86FD81E035CABEDBB6E48; SRCHD=AF=NOFORM; SRCHUID=V=2&GUID=C189E8987D5C41BA9337ED615BA6924A&dmnchg=1; MMCASM=ID=A0F369CBC60A43498AAB1E0D350FE746; BCP=AD=1&AL=1&SM=1; PPLState=1; KievRPSSecAuth=FABqBBRaTOJILtFsMkpLVWSG6AN6C/svRwNmAAAEgAAACHJhbQQQFGDiKAQD1/ORp16EVBd0hD24/yHQdVcvbzNQpWNbJAtLq1q60/su/6eWDCfj+NN1hNWrBMszu3sYffE1+ZYK0gYgi/oPcT24wW10ZjVlBUmkPjsHP3KLyiUl4qjrrxdxzS1HErdiFBULSBfAYf4U+Nd6BdAEXRtgAoOojy/GrgVJSLvOhKorS5OXjY7n8Pp6D+Y6bxHafOgRkvpXGRSgvbsIBvHflTF2xKuytmLIcWVFGTpy+EMaT/FQgq3KZu5yUL/EaYFeUPAWRe+L+vuyOHNNbe+UNEeIw++HqqO+PaEE5L2sZsgXIlXHHCkTUUQcPwTGGFC6H5nokZ29hGwmjDulBQGnjpn4JnZeVLzT/70sp5XNIMO09DazK+Q4zjgwRpNY66aK1CuJynC/w4/s7FD107/MPXP1iauFZ//WiHQyLPwLqhrCNTd4ibY9A228SKB8jo6Hct56qYmnioHR/aZeqpBuigUDE9KWpobRrvsvtemN6J6sccar1N7IH7XBr1TWka/YKxOo2R8RMnXf12SH6TExa5p1eQbX5RkS57HdrGA+h0bfq25yoqUd+XAuf2BFPnO0xhGeuQo70j8py1FEItVMEzl5F5jS8wMvSg1zhDI4rZc1lgCYF0eha99TNeDAFeCW3xRfoOFeKCMXfyPPaCyIg3smDfJN1YPGjkCMXlVb51d0t/VWXjd4v2fLsCuBhSr2pw7vfT/IXxXlAf2jmj/6ZeaVVauaEEmqVoDcX6xE1pGcEB4iPTmjMw4QRStH0UveBk7lhAi9ZO9IrRbK6yLQNNZ4fFl8DAhmez6hSPGNfC2Twf9k0aCsx39JpXkEoBXWyYU10C5qTlKCHYFdPT4QDv5phcRMyp0b2pOtLuowbapWpJ+VRLZxNDHK4oLNdMwp3aMmFOxGvpX1jOzZ4IzUWUdTZNAHlvA2/CNzlM5tqy0BXlxhOI2CK/8hnlQtoaRcub4VwkyyAFrigEgfwcc479vuyRpvTiwyww5wSQkZr6gMa0sDYjeKe1ntG07eYQX84iBBR7cDoYUJC61UqztAcrTTDYDZxobvJxAwOT5FOGf8SBPnf7O23TvVFq63SoUtBj6v2uqaEhjh9zLDdXg6HoSZcFVmd3HeEAZNVmIF5F7+SbGliYHa9Q2+JbBEJi3Xd3CjPXn5Y6KlMCfxQhwQgPvdM0EU8xKrXDFFSvIvZsWajX9/c9C9EHSRLhxv9Jk9qtUm4bgMGjxyv0WUZ3E4i0eYE3EEw6wB/9YhQicMfk4ksX32DlqSIeKKFhJO9oHLFWmr3wved+MsV2SAJIukT4ON+4ylyQOz+441J3VOvNKvX6QQ3fJjcelSjoarZSuW+KDGu1NJQbp/XaTCbyZCFQ5sLXPvx6xjcZOkSeYneszlxkeVqt6jRztil7UgvJBGFZyzjtu/IxQAQsDIAGjlDsMQ757SzHiCYcLBrVk=; MUIDB=2AC9489DECF86FD81E035CABEDBB6E48; MSCCSC=1; _tarLang=default=zh-Hans; _TTSS_IN=hist=WyJqYSIsInpoLUhhbnMiLCJlbiIsImF1dG8tZGV0ZWN0Il0=&isADRU=0; _TTSS_OUT=hist=WyJlbiIsInpoLUhhbnMiXQ==; _UR=QS=0&TQS=0&Pn=0; _Rwho=u=d&ts=2024-12-30; _SS=PC=U316&SID=116569555EFD6440338E7C305FD365AA&R=200&RB=0&GB=0&RG=200&RP=200; _EDGE_S=SID=116569555EFD6440338E7C305FD365AA&mkt=de-ch; USRLOC=HS=1&ELOC=LAT=25.82752799987793|LON=114.92839813232422|N=%E7%AB%A0%E8%B4%A1%E5%8C%BA%EF%BC%8C%E6%B1%9F%E8%A5%BF%E7%9C%81|ELT=1|; BFPRResults=FirstPageUrls=2DF84E820ED1F41718C1B48BCC535F5A%2CE2006453F92BD025FD069B71AA959C96%2C8166286A0236818EAE96FA2DF7D584D7%2CCE968127AC85065B2E257B5DAA120093%2C900B63B38AEF2004E203E1DAC92A32EB%2C04413A00EA408D3D07E2C9842ABF85AB%2CF9EC772AB91A8EA5691F09E3ED7F57A7%2C68DBB17A486DD69E50036DE662DFA4C1%2C12BAC1D0A65B5DA504680C6779BDBAA3%2CD34DA900795298F23CC2F71511CA3AD9&FPIG=64433113A5CB4B028542416F38A49B62; ipv6=hit=1735581666484&t=4; SRCHUSR=DOB=20241220&T=1735578034000&TPC=1735578161000; _HPVN=CS=eyJQbiI6eyJDbiI6NiwiU3QiOjAsIlFzIjowLCJQcm9kIjoiUCJ9LCJTYyI6eyJDbiI6NiwiU3QiOjAsIlFzIjowLCJQcm9kIjoiSCJ9LCJReiI6eyJDbiI6NiwiU3QiOjAsIlFzIjowLCJQcm9kIjoiVCJ9LCJBcCI6dHJ1ZSwiTXV0ZSI6dHJ1ZSwiTGFkIjoiMjAyNC0xMi0zMFQwMDowMDowMFoiLCJJb3RkIjowLCJHd2IiOjAsIlRucyI6MCwiRGZ0IjpudWxsLCJNdnMiOjAsIkZsdCI6MCwiSW1wIjoxOSwiVG9ibiI6MH0=; SNRHOP=I=&TS=; _C_ETH=1; _RwBf=r=0&ilt=203&ihpd=2&ispd=13&rc=200&rb=0&gb=0&rg=200&pc=200&mtu=0&rbb=0&g=0&cid=&clo=0&v=15&l=2024-12-30T08:00:00.0000000Z&lft=2024-12-19T00:00:00.0000000-08:00&aof=0&ard=0001-01-01T00:00:00.0000000&rwdbt=0&rwflt=0&rwaul2=0&o=2&p=&c=&t=0&s=0001-01-01T00:00:00.0000000+00:00&ts=2024-12-30T17:44:28.7828923+00:00&rwred=0&wls=&wlb=&wle=&ccp=&cpt=&lka=0&lkt=0&aad=0&TH=; dsc=order=BingPages; SRCHHPGUSR=SRCHLANG=zh-Hans&BZA=0&DM=0&BRW=XW&BRH=S&CW=1920&CH=458&SCW=1903&SCH=3446&DPR=1.0&UTC=480&PV=15.0.0&EXLTT=31&AV=14&ADV=14&RB=0&MB=0&HV=1735580672&WTS=63871174834&PRVCW=1920&PRVCH=458&IG=1EC0A339CA604D51908647D261F45D6D',
                // 'accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*',
                // }
                // });
                const url = `https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info|extracts&inprop=url&utf8=&format=json&origin=*&srlimit=10&srsearch=${keyword}`;
                const response = await fetch(url);
                const searchResult = await response.json();
                // render the search result
                const searchResultHtml = generateSearchResultHtml(searchResult.query.search, keyword);
                searchResultElem.innerHTML = searchResultHtml;
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        });
    </script>
</body>

</html>